import { 
    DualAxes,
    DualAxesConfig,
} from '@ant-design/charts';
import regression from 'regression';

const originData: [number, number][] = [
    [1, 4862.4],
    [2, 5294.7],
    [3, 5934.5],
    [4, 7171.0],
    [5, 8964.4],
    [6, 10202.2],
    [7, 11962.5],
    [8, 14928.3],
    [9, 16909.2],
    [10, 18547.9],
    [11, 21617.8],
    [12, 26638.1],
    [13, 34634.4],
    [14, 46759.4],
    [15, 58478.1],
    [16, 67884.6],
    [17, 74462.6],
    [18, 79395.7]
];

const { predict } = regression.linear(originData);
// const { predict } = regression.polynomial(originData);

const data = originData.map(d => ({
    x: String(d[0]),
    y: d[1],
}));

const lineData = originData.map(d => ({
    x: String(d[0]),
    z: predict(d[0])[1],
}));

console.log(data, lineData);

export default function () {
    const chartProps: DualAxesConfig = {
        data: [data, lineData],
        xField: 'x',
        yField: ['y', 'z'],
        yAxis: [
            {
                max: Math.max( ...data.map(d => d.y).concat(lineData.map(d => d.z)) ),
                min: Math.min( ...data.map(d => d.y).concat(lineData.map(d => d.z)) ),
            },
            false,
        ],
        geometryOptions: [
            {
                lineStyle: {
                    lineWidth: 0,
                },
                point: {
                    size: 6,
                }
            },
        ],
    };
    return <DualAxes { ...chartProps } />;
}
